# ---------------
# Console Logging
# ---------------

snippet cl "console.log('string')" b
console.log('$0');
endsnippet

snippet cv "console.log('var', var)" b
console.log(\`$1\`, ${1:variable});
endsnippet

snippet cjs "console.log(JSON)" b
console.log('$1', JSON.stringify(${1:variable}, null, 2));
endsnippet

snippet ca "console.log(arguments)" b
console.log(arguments);
endsnippet

# ----------------
# Plain JavaScript
# ----------------

snippet esd "eslint disable" b
/* eslint-disable $0 */
endsnippet

snippet ese "eslint enable" b
/* eslint-enable $0 */
endsnippet

snippet esl "eslint disable line" i
// eslint-disable-line $0
endsnippet

snippet switch "switch statement" b
switch (${1:variable}) {
  case ${2:case1}:
    $0
    break;
  default:
}
endsnippet

snippet constructor
constructor() {
  $0
}
endsnippet

snippet ii "magic import" b
import `!p
def formatVariableName(path):
  parts = path.split('/')
  module = parts[0]
  if len(parts) > 1:
    return parts[-1]
  else:
    return re.sub(r'[_\-]', '', module.title())
snip.rv = formatVariableName(t[1])
` from '${1}'$0
endsnippet


snippet il "magic import" b
import $1 from 'lodash/${1}'$0
endsnippet

# Arrow function
snippet => "Arrow function" i
(${1}) => {
  ${2}
}
endsnippet

snippet cf "bound class function" b
$1 = (${2:e}) => {
  $3
}
endsnippet

snippet exp "Export from location" b
export $1 from '${2:./}$1';
endsnippet

snippet expn "Export nested" b
export { $1 } from '${2:./}';
endsnippet

snippet expf "Export function" b
export default function ${1:name}(${2:arguments}) {
  $0
}
endsnippet

snippet expc "Export constant" b
export const $1 = $0
endsnippet

snippet promise "New promise" i
new Promise((resolve, reject) => {
  $0
})
endsnippet

# -----
# Unity
# -----

snippet dls "Debug Log a String" b
Debug.Log('$0');
endsnippet

snippet dl "Debug Log a Variable" b
Debug.Log(String.Format("$0$1: {0}", ${1:variable}));
endsnippet

snippet sf "String format" w
String.Format("$2$1: {0}$0", ${2:variable});
endsnippet

# -----
# React
# -----

snippet cp "destructure props" b
const { $0 } = this.props;
endsnippet

snippet cs "destructure state" b
const { $0 } = this.state;
endsnippet

snippet cn "class name" i
className="${0}"
endsnippet

snippet cna "aprhodite class name" i
className={css(styles.${0})}
endsnippet

snippet props "get property" i
this.props.${1}
endsnippet

snippet sst "set state" i
this.setState({ ${1}: ${2} });$0
endsnippet

snippet ci "Component Inline" b
<${1:Component} />$0
endsnippet

snippet cb "Component Block" b
<${1:Component}>
  $0
</$1>
endsnippet

snippet rj "return JSX" b
return (
  <${1:div}>
    $0
  </$1>
);
endsnippet

snippet r "return JSX" b
return (
  $0
);
endsnippet

snippet component "new component" b
import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class ${1:Name} extends Component {
  static propTypes = {
    ${2:prop}: ${3:PropTypes.string},
  }

  ${4:static defaultProps = {
    ${5:onThing}: ${6:function() {}},
  }}

  ${7:state = {
    ${8:prop}: ${9:true},
  }}

  render() {
    return (
      <div>
        $0
      </div>
    );
  }
}
endsnippet

snippet functional "new functional component" b
import React from 'react'
import PropTypes from 'prop-types'

const ${1:Name} = ({ ${2:prop} }) => (
  <div>
    $0
  </div>
)

$1.propTypes = {
  $2: PropTypes.string,
}

export default $1
endsnippet

# Lifecycle

snippet defaultProps "get default props" b
static defaultProps = {
  $1
}
endsnippet

snippet propTypes "React prop types definition" b
static propTypes = {
  ${1:prop}: ${2:PropTypes.string.isRequired},${0}
}
endsnippet

snippet cwm "componentWillMount()" b
componentWillMount() {
  $1
}
endsnippet

snippet cdm "componentDidMount()" b
componentDidMount() {
  $1
}
endsnippet

snippet scu "shouldComponentUpdate(nextProps, nextState)" b
shouldComponentUpdate(nextProps, nextState) {
  return $1;
}
endsnippet

snippet cdu "componentDidUpdate(prevProps, prevState)" b
componentDidUpdate(prevProps, prevState) {
  $1
}
endsnippet

snippet cwu "componentWillUpdate()" b
componentWillUnmount() {
  $1
}
endsnippet

snippet render "render" b
render() {
  return (
    ${1:<div />}
  );
}$0
endsnippet

# ==========================================
# Prop Types Section
#

# Inline prop types
snippet pt.a "React PropTypes array" w
PropTypes.array,
endsnippet

snippet pt.ar "React PropTypes array required" w
PropTypes.array.isRequired,
endsnippet

snippet pt.b "React PropTypes boolean" w
PropTypes.bool,
endsnippet

snippet pt.br "React PropTypes boolean required" w
PropTypes.bool.isRequired,
endsnippet

snippet pt.f "React PropTypes function" w
PropTypes.func,
endsnippet

snippet pt.fr "React PropTypes function required" w
PropTypes.func.isRequired,
endsnippet

snippet pt.nu "React PropTypes number" w
PropTypes.number,
endsnippet

snippet pt.nur "React PropTypes number required" w
PropTypes.number.isRequired,
endsnippet

snippet pt.o "React PropTypes object" w
PropTypes.object,
endsnippet

snippet pt.or "React PropTypes object required" w
PropTypes.object.isRequired,
endsnippet

snippet pt.s "React PropType string" w
PropTypes.string,
endsnippet

snippet pt.sr "React PropType string required" w
PropTypes.string.isRequired,
endsnippet

snippet pt.no "React PropTypes node" w
PropTypes.node,
endsnippet

snippet pt.nor "React PropTypes node required" w
PropTypes.node.isRequired,
endsnippet

snippet pt.e "React PropTypes element" w
PropTypes.element,
endsnippet

snippet pt.er "React PropTypes element required" w
PropTypes.element.isRequired,
endsnippet

snippet pt.ao "React PropTypes arrayOf" w
PropTypes.arrayOf(${1:PropTypes.string}),
endsnippet

snippet pt.aor "React PropTypes arrayOf required" w
PropTypes.arrayOf(${1:PropTypes.string}).isRequired,
endsnippet

snippet pt.io "React PropTypes instanceOf" w
PropTypes.instanceOf(${1:PropTypes.string}),
endsnippet

snippet pt.ior "React PropTypes instanceOf required" w
PropTypes.instanceOf(${1:PropTypes.string}).isRequired,
endsnippet

snippet pt.oo "React PropTypes objectOf" w
PropTypes.objectOf(${1:PropTypes.string}),
endsnippet

snippet pt.oor "React PropTypes objectOf required" w
PropTypes.objectOf(${1:PropTypes.string}).isRequired,
endsnippet

snippet pt.one "React PropTypes oneOf" w
PropTypes.oneOf(['$1'$2]),
endsnippet

snippet pt.oner "React PropTypes oneOf required" w
PropTypes.oneOf(['$1'$2]).isRequired,
endsnippet

snippet pt.onet "React PropTypes onOfType" w
PropTypes.oneOfType([
  $1
]),
endsnippet

snippet pt.onetr "React PropTypes onOfType required" w
PropTypes.oneOfType([
  $1
]).isRequired,
endsnippet

snippet pt.sh "React PropTyes shape" w
PropTypes.shape({
  $1
}),
endsnippet

snippet pt.shr "React PropTypes shape required" w
PropTypes.shape({
  $1
}).isRequired,
endsnippet

snippet handleChange "Handle change function" i
handleChange = ({ target: { value } }) => {
  this.setState({ value });
}
endsnippet

snippet handleSubmit "Handle submit function" i
handleSubmit = (event) => {
  event.preventDefault();
  $0
}
endsnippet

snippet ulr "ul to react component" i
<ul>
  {
    $1.map(({ $2 }) => (
      <li key={$3}>$4</li>
    ))
  }
</ul>
endsnippet

snippet handleClick "Handle click function" i
handleClick = (event) => {
  $0
}
endsnippet
